<template>
	<!--键盘-->
	<view class="keyboard" catchtap="stopProp">
		<block v-for="(itemNameG, idxG) in keyboardAlph" :key="idxG">
			<view class="keyboadr-lineback">
				<block v-for="(itemName, idx) in itemNameG" :key="idx">
					<view v-if="idxG==1 && idx==0" class="td td_num td_big_left" hover-class="board_bg"
						@click="tapKeyboard" :data-index="idx" :data-val="itemName">
						{{itemName}}
					</view>
					<view v-else-if="idxG==1 && idx==8" class="td td_num td_big_right" hover-class="board_bg"
						@click="tapKeyboard" :data-index="idx" :data-val="itemName">
						{{itemName}}
					</view>
					<view v-else class="td td_num" hover-class="board_bg" @click="tapKeyboard" :data-index="idx"
						:data-val="itemName">
						{{itemName}}
					</view>
				</block>
			</view>
		</block>
		<view>
			<view class="td td_spec_del iconfont icon-deleteicon" @click="tapKeyboard" data-val="del"
				hover-class="board_bg">
				<image data-val="del" class='icon-del' src='../static/image/icon_del.svg'></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		properties: {
			colorStyle: {
				type: String,
			},
			showDelete: {
				type: String,
			}
		},
		ready: function() {
			if (this.showDelete == 'false') {
				this.delStatus = false
			} else {
				this.delStatus = true
			}
		},
		data() {
			return {
				keyboardAlph: ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'],
				delStatus: true,
				isNum: false,
				isUpperCase: false,
				keyboardNumber: '1234567890-/:;()$&@".,?!\'',
				keyboardValue: "",
			}
		},
		methods: {
			// 清空键盘事件
			emptyInput() {
				this.keyboardValue = '';
			},
			/**
			 * 点击键盘按键事件
			 */
			tapKeyboard: function(e) {
				console.log('e', e);
				var tapVal = e.target.dataset.val;
				var keyboardValue = this.keyboardValue;
				var length = keyboardValue.length;
				if (tapVal === 'del') {
					//点击删除
					if (length > 0) {
						keyboardValue = keyboardValue.substring(0, length - 1);
					}
					this.keyboardValue = keyboardValue;
					this.$emit('input', {
						'keyboardValue': keyboardValue,
						'target': tapVal
					});
					return false;
				}
				keyboardValue = (keyboardValue + tapVal);
				this.keyboardValue = keyboardValue;
				this.$emit('input', {
					'keyboardValue': keyboardValue,
					'target': tapVal
				});
				return false;
			},
			onShift() {
				const keyboardLowerCaseAlph = 'qwertyuiopasdfghjklzxcvbnm';
				const keyboardUpperCaseAlph = 'QWERTYUIOPASDFGHJKLZXCVBNM';
				const isUpperCase = this.data.isUpperCase;
				let keyboardAlph;
				if (isUpperCase) {
					keyboardAlph = keyboardLowerCaseAlph;
				} else {
					keyboardAlph = keyboardUpperCaseAlph;
				}
				this.keyboardAlph = keyboardAlph;
				this.isUpperCase = !isUpperCase;
			},
			onDone() {
				this.$emit('done');
			},
			onTrans() {
				const isNum = this.data.isNum;
				this.isNum = !isNum;
			},
			/**
			 * 组织键盘点击事件冒泡到父容器
			 */
			stopProp: function() {
				return false;
			}
		}
	}
</script>

<style lang="less">
	.keyboard {
		z-index: 9;
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		// display: -webkit-flex;
		display: flex;
		flex-direction: column;
		// flex-flow: nowrap;
		justify-content: center;
		align-items: center;
	}

	.keyboadr-lineback {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.td {
		// font-family: HelveticaNeue, HelveticaNeue-Regular, HelveticaNeue-Light;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		height: 8.5vw;
		line-height: 8vw;
		background: linear-gradient(to bottom, #130e00, #373632);
		border: 3px solid #373632;
		margin: 5px 1px;
		color: #fff;
		border-radius: 10px;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.35);
	}

	.td_num {
		width: 8.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.td_space {
		width: 150px;
	}

	.icon-space {
		width: 15px;
		height: 15px;
	}

	.td_mid {
		width: 48px;
	}

	.td_nor {
		width: 37px;
		margin: 5px 2px;
	}

	.td_big_right {
		margin-right: 27.5px;
	}

	.td_big_left {
		margin-left: 27.5px;
	}

	.td_spec_fin {
		width: 23%;
		justify-self: flex-end;
		background-color: #09f;
		color: #fff;
	}

	.icon-shift,
	.icon-shift-on {
		width: 28px;
		height: 15px;
		position: relative;
		top: 1px;
	}

	.icon-del,
	.icon-del-hover {
		width: 20px;
		height: 15px;
		position: relative;
		top: 1px;
	}

	.td_spec_shift,

	.td_spec_del {
		position: absolute;
		width: 8.5vw;
		bottom: 0;
		background-color: #000;
	}

	.td_spec_bar {
		position: absolute;
		width: 8.5vw;
		background-color: #000;
	}

	.td_spec_shift {
		left: 15px;
	}

	.td_spec_del {
		right: 15px;
	}

	.icon-del,
	.icon-del-hover {
		width: 20px;
		height: 15px;
		position: relative;
		top: 1px;
	}

	/* 删除hover */
	.icon-del-hover {
		display: none;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
	}

	.td_spec_del.board_bg_spec .icon-del {
		display: none;
	}

	.td_spec_del.board_bg_spec .icon-del-hover {
		display: inline-block;
	}

	.board_bg_spec {
		background: #fdd544;
	}

	.icon-shift-on {
		display: none;
	}

	.td_spec_shift.on .icon-shift {
		display: none;
	}

	.td_spec_shift.on .icon-shift-on {
		display: inline-block;
	}

	.submit {
		width: 160px;
		border-radius: 20px;
		overflow: hidden;
		background: linear-gradient(to bottom, #130e00, #373632);
		color: #fff;
		font-size: 18px;
		font-family: hzgb;
	}

	.board_bg {
		box-shadow: 0 0 0 #e5e5e5;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		color: #fff;
	}

	.orange {
		background: #fd9571;
	}
</style>